<template>
	<view class="content">
		<image class="backgroundImage" src="https://i0.imgs.ovh/2023/10/20/2sUkm.png" ></image>
		<!-- 平台发卷 -->
		<view class="plateform">
			<coupon title="平台发券" @accept="acceptCoupon" :couponList="plateformCouponList"  ></coupon>
		</view>
		
		<!-- 商家发卷 -->
		<coupon title="商家发券" :couponList="storeCouponList" ></coupon>
		
	</view>
</template>

<script>
	import {getAllUnacceptedCoupons, acceptCoupon} from '@/api/coupon.js'
	export default {
		data() {
			return {
				plateformAmount: 0,	// 平台发券总金额
				storeAmount: 0,		// 商家发券总金额
				plateformCouponList: [],
				storeCouponList: []
			}
		},
		onLoad() {
			// 加载数据
			this.getAllUnacceptedCouponList();
		},
		methods: {
			// 加载平台发券
			getAllUnacceptedCouponList() {
				getAllUnacceptedCoupons(
					(res) => {
					if (res.data.data != null) {
						if (res.data.data.plateformCouponList != undefined) {
							this.plateformCouponList = res.data.data.plateformCouponList
						}
						if (res.data.data.storeCouponList != undefined) {
							this.storeCouponList = res.data.data.storeCouponList
						}
					}
				})
			},
			
			// 领取优惠券
			acceptCoupon(id, categoryId) {
				acceptCoupon({
					id: id,
					categoryId: categoryId
				});
				this.getAllUnacceptedCouponList();
			}
			
		}
	}
</script>

<style>
	.content {
		font-family: PingFangSC-Regular, sans-serif;
	}
	
	.backgroundImage {
		width: 100%;
		height: 1210upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	.plateform {
		margin-top: 300upx;
	}
	
</style>
